// 店铺销售额统计
<template>
    <div class="gradient-content full-width full-height">
        <div :id="idName"></div>
    </div>
</template>

<script>
import { Chart } from '@antv/g2'
export default {
    props: {
        idName: {
            type: String,
            default: 'sale_today_yesterday',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            chart: null,
            height: 0,
        }
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    mounted() {
        this.$nextTick(() => {
            const boxContElement = document.querySelector(`.gradient-content`)
            this.height = boxContElement.clientHeight

            this.render()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
                // padding: [20, 70, 20, 70],
            })
            // Step 2: 载入数据源
            this.chart.data(this.chartData)

            this.chart.coordinate().transpose().scale(1, -1)

            this.chart.axis('value', {
                position: 'right',
            })
            this.chart.axis('label', {
                label: {
                    offset: 12,
                    // style: {
                    //     fill: '#fff',
                    // }
                },
            })
            this.chart.tooltip({
                shared: true,
                showMarkers: false,
                customItems: (items) => {
                    return items.map(item => {
                        item.value = '$' + parseFloat(item.value).toFixed(2) 
                        return item
                    });
                }
            })
            this.chart.legend({
                position: 'top',
                itemName: {
                    style: {
                        fill: '#fff',
                    },
                },
            })
            this.chart
                .interval()
                .position('label*value')
                .color('type', ['#5A90FA', '#11a983'])
                .adjust([
                    {
                        type: 'dodge',
                        marginRatio: 0,
                    },
                ])


            // this.chart.scale({
            //     value: {
            //         range: [0, 1],
            //     },
            //     label: {
            //         nice: true,
            //     },
            // });
            // this.chart.axis('value')
            // this.chart.tooltip({
            //     shared: true,
            //     showMarkers: false,
            //     customItems: (items) => {
            //         return items.map(item => {
            //             item.value = '$' + parseFloat(item.value).toFixed(2) 
            //             return item
            //         });
            //     }
            // })
            // this.chart.legend({
            //     position: 'top',
            //     itemName: {
            //         style: {
            //             fill: '#fff',
            //         },
            //     },
            // })
            // this.chart
            //     .line()
            //     .position('label*value')
            //     .color('type', ['#5A90FA', '#11a983'])
            this.chart.interaction('active-region')
            this.chart.render()
        },
    },
}
</script>
